<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <h2>1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('atguigu')">test2</button>
    <button @click="test3($event)">test3</button>
    <button @click="test4(123,$event)">test4</button>
    <h2>2.事件修饰符</h2>
    <div style="width:200px;height: 200px;background:red" @click="test5">
        <div style="width:100px;height: 100px;background:blue" @click.stop="test6"></div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
    <h3>3.按键修饰符</h3>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#example",
        data: {
            test1(){
                alert("test1");
            },
            test2(msg){
                alert(msg);
            },
            test3(event){
                alert(event.target.innerHTML);
            },
            test4(number,event){
                alert(number + "---" + event.target.innerHTML);
            },
            test5(){
                alert("out");
            },
            test6(){
                //event.stopPropagation();
                alert("inner");
            },
            test7(){
                // event.preventDefault();
                alert("点击了");
            },
            test8(event){
                if(event.keyCode === 13)//按下13
                alert(event.target.value +" "+ event.keyCode);
            }
        }
    });
</script>
</body>
</html>